<template>
  <div>
    <Loading :loading="loading">
      <Form :ref="formRef" :rules="formDataCheckRules" :label-width="100" :model="formData">
        <FormItem prop="name" label="用户名:" style="width:90%">
          <Input type="text" v-model="formData.name" placeholder="请输入" />
        </FormItem>
        <FormItem prop="email" label="邮箱:" style="width:90%">
          <Input type="text" v-model="formData.email" placeholder="请输入" />
        </FormItem>
        <FormItem prop="phone" label="电话:" style="width:90%">
          <Input type="text" v-model="formData.phone" placeholder="请输入" />
        </FormItem>
        <FormItem prop="orgId" label="机构:" style="width:90%">
          <RemoteCascader
            :api="orgApi"
            valueKey="id"
            v-model="formData.orgId"
            needQueryParam
            :queryParam="{
            parentId:{
              value: ';'
            }
          }"
            afterQueryParam="parentId"
            clearable
            lastValue
          />
        </FormItem>
        <FormItem prop="password" label="密码:" style="width:90%">
          <Input type="password" v-model="formData.password" placeholder="8-16位,包含大小写字母,数字,特殊字符" />
        </FormItem>
        <FormItem prop="passwordValidDays" label="密码有效期:" style="width:90%">
          <InputNumber :min="1" :step="1" v-model="formData.passwordValidDays" placeholder="请输入" />天
        </FormItem>
        <FormItem prop="roles" label="角色:" style="width:90%">
          <RemoteTableSelect
            :labelRender="getRoelabel"
            primaryKey="id"
            v-model="formData.roles"
            :namespace="roleNamepace"
            :columns="columns"
          >
            <SearchBar :namespace="roleNamepace">
              <SearchBarItem label="id:" :labelLg="2">
                <Input type="text" v-model="queryParam.id.value" clearable />
              </SearchBarItem>
              <SearchBarItem label="名称:" :labelLg="5">
                <Input
                  type="text"
                  v-model="queryParam.name.value"
                  placeholder="请输入, 支持模糊查询"
                  clearable
                />
              </SearchBarItem>
              <SearchBarItem label="编码:" :labelLg="5">
                <Input
                  type="text"
                  v-model="queryParam.code.value"
                  placeholder="请输入, 支持模糊查询"
                  clearable
                />
              </SearchBarItem>
              <SearchBarItem label="所属应用:" :labelLg="5">
                <RemoteSelect
                  :api="applicationApi"
                  v-model="queryParam.applicationId.value"
                  placeholder="请选择"
                  clearable
                />
              </SearchBarItem>
            </SearchBar>
          </RemoteTableSelect>
        </FormItem>
        <FormItem prop="status" label="状态:" style="width:80%">
          <i-switch v-model="formData.status" :true-value="0" :false-value="1" size="large">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
        <FormItem :style="{width: '90%'}">
          <div :style="{textAlign: 'right'}">
            <Button type="primary" @click="handleSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteCascader from "@/components/RemoteCascader";
import SearchBar from "@/components/SearchBar";
import { namespace } from "../module";
import moduleRegist from "@/utils/moduleRegist";
import {
  namespace as roleNamespace,
  module as roleModule
} from "@/views/admin/Role/module";
import {
  Input,
  Button,
  Form,
  FormItem,
  Message,
  InputNumber
} from "view-design";
import Loading from "@/components/Loading";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import Uuid from "uuid";
export default {
  name: "UserAddView",
  components: {
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteCascader,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    InputNumber
  },
  data: function() {
    let vm = this;
    return {
      formRef: Uuid.v1(),
      formData: {
        passwordValidDays: 30,
        status: 0
      },
      roleNamepace: roleNamespace,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 200
        },
        {
          title: "编码",
          key: "code",
          align: "center",
          width: 250
        },
        {
          title: "所属应用",
          key: "applicationName",
          align: "center",
          width: 250
        },
        {
          title: "简介",
          key: "describe",
          align: "center",
          minWidth: 200
        }
      ]
    };
  },
  computed: {
    orgApi() {
      return config.serverProxy + config.authServicePath + "/org/getOptions";
    },
    queryParam: {
      get() {
        return this.$store.state[roleNamespace].query;
      },
      set(value) {
        this.$store.commit(`${roleNamespace}/saveState`, {
          query: value
        });
      }
    },
    applicationApi() {
      return (
        config.serverProxy + config.authServicePath + "/application/getOptions"
      );
    },
    formDataCheckRules: function() {
      const validatePassword = (rule, value, callback) => {
        if (!value) {
          callback();
        } else {
          var reg = new RegExp(config.passwordReg);
          if (value.length < 32 && !reg.test(value)) {
            callback(new Error("8-16位,包含大小写字母,数字,特殊字符"));
          } else {
            callback();
          }
        }
      };
      return {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        email: [
          {
            required: false,
            message: "请输入",
            trigger: "blur",
            type: "email"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        orgId: [
          {
            required: false,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        password: [
          {
            required: false,
            message: "请输入",
            trigger: "blur",
            type: "string"
          },
          { validator: validatePassword, trigger: "blur", trigger: "change" }
        ],
        passwordValidDays: [
          {
            required: false,
            message: "请输入",
            trigger: "blur",
            type: "number"
          }
        ]
      };
    },
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  },
  beforeMount() {
    moduleRegist(roleModule);
  },
  methods: {
    getRoelabel(role) {
      return role.applicationName + "/" + role.name;
    },
    handleSubmit: function() {
      let vm = this;
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let formData = vm.formData;
          let roles = formData.roles;
          if (roles) {
            let roleIds = [];
            for (let i = 0; i < roles.length; i++) {
              roleIds.push(roles[i].id);
            }
            formData.roleIds = roleIds;
          }
          formData.orgIds = [formData.orgId];
          let response = await vm.$store.dispatch(
            `${namespace}/save`,
            formData
          );
          if (response.errorcode === 0) {
            Message.success("提交成功");
          }
        }
      });
    }
  }
};
</script>

<style>
</style>